<template>
    <div class="test">
        <div class="tabbar">
            <div class="tabbar-choose">
                <div class="card" @click="handleClickHome">
                    首页
                </div>
                <div class="card" @click="handleClickSearch">
                    查一查
                </div>
                <div class="card" @click="handleClickNews">
                    看新闻
                </div>
                <div class="card" @click="handleClickStandard">
                    查标准
                </div>
                <div class="card" @click="handleClickStandard">
                    查对策
                </div>
                <div class="card" @click="handleClickCurrent">
                    查现状
                </div>
                <div class="tabbar-search">
                    <input class="tabbar-search-input" type="texe" placeholder="Search">
                    <button class="tabbar-search-btn">搜索</button>
                </div>
            </div>
        </div>
        <!-- <div class="search">
            <div class="search-titile">僵尸企业，一查就知道</div>
            <input class="search-input" type="search-item" placeholder="请输入企业名请输入企业名请输入企业名请输入企业名请输入企业名请输入企业名">
            <button class="search-btn">查一查</button>
        </div> -->
    </div>
</template>

<script>
export default {
  name: 'tabbar',
  data () {
    return {
    //   list: [{
    //     id: 1,
    //     content: '查一查'
    //   }, {
    //     id: 2,
    //     content: '现状分析'
    //   }, {
    //     id: 3,
    //     content: '知识小库'
    //   }, {
    //     id: 4,
    //     content: '评断标准'
    //   }, {
    //     id: 5,
    //     content: '合作通道'
    //   }]
    }
  },
  methods: {
    handleClickNews () {
      this.$router.push('/news')
    },
    handleClickSearch () {
      this.$router.push('/search')
    },
    handleClickHome () {
      this.$router.push('/')
    },
    handleClickStandard () {
      this.$router.push('/standard')
    },
    handleClickCurrent () {
      this.$router.push('./current')
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibies.styl'
.test{
    background: #F5F5F5;
}
    .tabbar{
        background: #F5F5F5;
        height: 1.2rem;
        width: 100%;
        margin: 0;
        padding: 0;
        background: black;
        font-size: 20px;
    }
        .tabbar-choose{
            margin-left: 10%;
            padding-top: .2rem;
        }
            .card{
                float: left;
                color: white;
                margin: .2rem .4rem 0 .4rem;
            }
            .card:hover{
                color: $bgColor;
            }
            .tabbar-search{
                text-align: center;
                position: absolute;
                right: 10%;
                top: 2.7rem;
            }
                .tabbar-search-input{
                    font-size: 20px;
                    border-radius: 10px;
                }
                .tabbar-search-btn{
                    font-size: 20px;
                    box-shadow: 1px 0px 1px 2px rgba(0,0,0,0.1);
                }
    // .search{
    //     position: relative;
    //     width: 90%;
    //     height: 200px;
    //     top: 30px;
    //     left: 5%;
    //     right: 5%;
    //     text-align: center;
    //     // background: #F5F5F5;
    //     margin-bottom:30px;
    // }
    //     .search-titile{
    //         color: $bgColor;
    //         font-size: 40px;
    //         font-weight: bold;
    //     }
    //     .search-input{
    //         margin-top: 20px;
    //         width: 40%;
    //         height: 20%;
    //         border-radius: 10px;
    //         box-shadow: 1px 1px 0 2px rgba(0,0,0,0.1);
    //     }
    //     .search-btn{
    //         height: 40px;
    //         width: 80px;
    //         color: $bgColor;
    //         border-radius: 10px;
    //         margin-left: 30px;
    //         font-weight: bold;
    //     }
</style>
